{% extends 'layout.html' %}
{% load static %}

{% block css %}
    <style>
        #top_message_box {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 200px;
            line-height: 0;
            margin: 0 auto;
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.level_tag }}" id="top_message_box">
                {{ message.message }}
            </div>
        {% endfor %}
    {% endif %}

    <div class="table">
        <div class="add_btn">
            <a href="{% url 'my_order_add' %}" class="btn btn-success">
                <i class="fas fa-plus-circle"></i>
                <span> 创建订单</span>
            </a>
        </div>

        <table class="table table-bordered">
            <thead>
            <tr>
                <th>订单号</th>
                <th>视频地址</th>
                <th>数量</th>
                <th>价格</th>
                <th>原播放量</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in pager.sub_queryset %}
                <tr row-id="{{ item.id }}">
                    <th scope="row">{{ item.oid }}</th>
                    <td>{{ item.url }}</td>
                    <td>{{ item.count }}</td>
                    <td>{{ item.real_price }}（<span class="ori_price">{{ item.price }}</span>）</td>
                    <td>{{ item.old_view_count }}</td>
                    <td>{{ item.create_date|date:'Y-m-d' }}</td>
                    <td>{{ item.get_status_display }}</td>
                    <td>
                        {% if item.status == 1 %}
                            <a href="{% url 'my_order_cancel' pk=item.id %}" class="btn btn-danger btn-xs">撤单</a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

        <nav aria-label="Page navigation">
            <ul class="pagination">
                {{ pager.html }}
            </ul>
        </nav>
    </div>
{% endblock %}

{% block js %}
    <script>
        setTimeout(function () {
            $('#top_message_box').addClass('hide')
        }, 3000)
    </script>
{% endblock %}
